<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/util.js"></script>
</head>
<body>

    <div id="app">
        <table>
            <tr>
                <td></td>
                <td>id</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <!-- v-for="引用 in 要遍历的数组" -->
            <tr v-for="item in list">
                <td>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <a :href="'edit.html?id='+item.id">修改</a>
                    <button @click="del(item.id)">删除</button>
                </td>
            </tr>
        </table>

    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                list:[]
            },
            created(){
                this.findAll()
            },
            methods:{
                del(id){
                    axios.get("/user/del?id="+id).then(
                        res=>{
                            this.findAll()
                        }
                    )


                },
                findAll(){
                    axios.get("/user/findAll").then(
                        res => {
                            this.list = res.data
                        }
                    )
                }
            }
        })
    </script>

</body>
</html>